import React from "react";

import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
  const navigate = useNavigate()
  const [messages] = React.useState([
    { id: 1, title: "消息1", content: "内容1" },
    { id: 2, title: "消息2", content: "内容2" },
    { id: 3, title: "消息3", content: "内容3" },
  ]);

  const showDetail=(m)=>{
    return ()=>{
    navigate("detail", {
      replace: false,
      state: {
        id: m.id,
        title: m.title,
        content: m.content
      }
    })
    }
  }

  return (
    <div>
      <nav>
        <ul>
          {messages.map((m) => {
            // 向组件传递params参数
            return (
            //<li key={m.id} style={{listStyle:'none'}}>
            //  <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
            //</li>
            // 向组件传递search参数
            //<li key={m.id}>
            //  <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
            //</li>
            // 向组件传递state参数
            <li style={{listStyle:'none'}} key={m.id}>
              <Link replace={false} to={{pathname:"detail"}} 
                state={{id:m.id, title:m.title, content:m.content}}>{m.title}
              </Link>&nbsp;
              <button onClick={showDetail(m)}>查看详情</button>
            </li>
            )})}
        </ul>
      </nav>
      <Outlet />
    </div>
  )
}